<script setup>
import { Plus, Delete, EditPen } from '@element-plus/icons-vue'
import { ref } from 'vue'
import {
    dataFeedList,
    updataUrlState,
    setSubscriptionAddress,
    delSubscriptionAddress,
} from '@/assets/api/api'
// import { showLoading } from '@/assets/js/loading'
import { ElMessage, ElMessageBox } from 'element-plus'
const noData = ref(false)
const dialogTitle = ref('')
const editVisible = ref(false)
const protocolTypeList = [
    {
        label: 'http',
        value: 1,
    },
    {
        label: 'mqtt',
        value: 2,
    },
]
const formData = ref()
const newAction = () => {
    // Object.assign(formData.value, {})
    formData.value = { type: 1 }
    //函数每次创建都是新的函数，所以Object.assign第二个参数是一个初始化的数据对象，会覆盖第一个参数的值
    dialogTitle.value = '新增'
    editVisible.value = true
}
const edit = (item) => {
    dialogTitle.value = '编辑'
    editVisible.value = true
    formData.value = item
}
const reg =
    /^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?$/
const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入地址'))
    } else {
        if (!reg.test(value)) {
            callback(new Error('请输入正确地址'))
        }
        if (formData.value.url !== '') {
            if (!formTestRef.value) return
            formTestRef.value.validateField('cardId', () => null)
            callback()
        }
    }
}
const rules = ref({
    url: [{ required: true, validator: validatePass, trigger: 'blur' }],
})

const formTestRef = ref()
const saveData = () => {
    //保存
    formTestRef.value.validate((valid) => {
        if (valid) {
            setSubscriptionAddress({ ...formData.value }).then((res) => {
                if (res.code == 0) {
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                    editVisible.value = false
                    getData()
                } else {
                    ElMessage({
                        message: res.msg,
                        type: 'warning',
                    })
                }
            })
        }
    })
}
const updateState = (state, id) => {
    //更新状态
    updataUrlState({
        state: state,
        id: id,
    }).then((res) => {
        if (res.code == 0) {
            ElMessage({
                message: res.msg,
                type: 'success',
            })
            getData()
        } else {
            ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })
}
const deleteData = (id) => {
    ElMessageBox.confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            delSubscriptionAddress({ id: id }).then((res) => {
                if (res.code == 0) {
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                    getData()
                } else {
                    ElMessage({
                        message: res.msg,
                        type: 'warning',
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}
const showtab = ref('2')
const ChangeShowtab = (tab) => {
    showtab.value = tab
}

const search = ref('')
const filterTableData = ref()
const getData = () => {
    dataFeedList().then((res) => {
        filterTableData.value = res.data.filter(
            (data) =>
                !search.value ||
                data.name.toLowerCase().includes(search.value.toLowerCase())
        )
        noData.value = filterTableData.value.length == 0 ? true : false
    })
}
getData()
const searchData = () => {
    getData()
}
const restData = () => {
    search.value = ''
}
</script>
<template>
    <el-form :inline="true" class="flex-1 white-box">
        <el-row :gutter="20" class="search">
            <el-form-item label="设备名称">
                <el-input v-model="search" placeholder="请输入设备名称" />
            </el-form-item>
        </el-row>
        <el-row :gutter="20">
            <el-button @click="restData">重置</el-button>
            <el-button type="primary" @click="searchData">搜索</el-button>
        </el-row>
    </el-form>
    <div class="white-box mt-10 overflow-auto d-flex-1">
        <div class="my-10 fl-bw">
            <el-button type="primary" :icon="Plus" @click="newAction"
                >新增</el-button
            >
            <div class="svgStyle">
                <div
                    v-for="item in 2"
                    @click="ChangeShowtab(item)"
                    :style="
                        showtab == item
                            ? 'border-color:var(--el-color-primary)'
                            : ''
                    "
                    :key="item"
                >
                    <span
                        class="icon"
                        style="font-size: 18px"
                        :style="
                            showtab == item
                                ? 'color:var(--el-color-primary)'
                                : 'color:#c5c6c8'
                        "
                        >{{ item == 1 ? '&#xe60b;' : '&#xe67c;' }}</span
                    >
                </div>
            </div>
        </div>
        <el-empty description="暂无数据" v-if="noData && showtab == 2" />
        <el-row :gutter="20" v-if="showtab == 2">
            <el-col
                :span="6"
                v-for="(item, index) in filterTableData"
                :key="index"
            >
                <div class="iot-card">
                    <div class="iot-card-content">
                        <div class="img">
                            <img src="../../assets/images/dueros.png" alt="" />
                        </div>
                        <div class="details">
                            <h4 class="title">{{ item.name }}</h4>
                            <el-row>
                                <el-col :span="12">
                                    <h5>说明</h5>
                                    <p>{{ item.remark }}</p>
                                </el-col>
                            </el-row>
                        </div>
                        <div
                            class="card-content-bg2"
                            :style="
                                item.state == '1'
                                    ? 'background: linear-gradient(188.4deg, rgba(9, 46, 231, 0.03) 30%, rgba(9, 46, 231, 0) 80%);'
                                    : ''
                            "
                        ></div>
                        <div
                            class="card-content-bg1"
                            :style="
                                item.state == '1'
                                    ? 'background: linear-gradient(188.4deg, rgba(9, 46, 231, 0.03) 30%, rgba(9, 46, 231, 0) 80%);'
                                    : ''
                            "
                        ></div>
                        <div class="state success" v-if="item.state == '1'">
                            <div class="state-content">
                                <span class="dot success mr-5"></span>
                                正常
                            </div>
                        </div>
                        <div class="state danger" v-else>
                            <div class="state-content">
                                <span class="dot danger mr-5"></span>
                                禁用
                            </div>
                        </div>
                    </div>
                    <div class="iot-card-oper">
                        <div class="card-button">
                            <el-button link type="primary" @click="edit(item)">
                                <el-icon class="mr-5"><EditPen /></el-icon>
                                编辑
                            </el-button>
                        </div>
                        <div class="card-button" v-if="item.state == '1'">
                            <el-button
                                link
                                type="danger"
                                @click="updateState('2', item.id)"
                            >
                                <el-icon class="mr-5"><CircleClose /></el-icon>
                                禁用
                            </el-button>
                        </div>
                        <div class="card-button" v-else>
                            <el-button
                                link
                                type="primary"
                                @click="updateState('1', item.id)"
                            >
                                <el-icon class="mr-5"><VideoPlay /></el-icon>
                                启用
                            </el-button>
                        </div>
                        <div class="card-button delete">
                            <el-button
                                link
                                type="warning"
                                @click="deleteData(item.id)"
                            >
                                <el-icon><Delete /></el-icon>
                            </el-button>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-table :data="filterTableData" style="width: 100%" v-else>
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="remark" label="说明" />
            <el-table-column prop="url" label="订阅地址" width="500" />
            <el-table-column label="状态" align="center">
                <template #default="scope">
                    <span
                        class="icon"
                        :style="
                            scope.row.state == 1
                                ? 'color:#092EE7'
                                : 'color:#E50012'
                        "
                        >&#xe608;</span
                    >
                    {{ scope.row.state == 1 ? '启用' : '禁用' }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="编辑"
                        placement="top"
                    >
                        <el-button
                            :icon="EditPen"
                            circle
                            @click="edit(scope.row)"
                        />
                    </el-tooltip>
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="删除"
                        placement="top"
                    >
                        <el-button
                            :icon="Delete"
                            circle
                            @click="deleteData(scope.row.id)"
                        />
                    </el-tooltip>
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        :content="scope.row.state == 1 ? '禁用' : '启用'"
                        placement="top"
                    >
                        <el-button
                            circle
                            v-if="scope.row.state == 1"
                            @click="updateState('2', scope.row.id)"
                        >
                            <span class="icon">&#xe60f;</span>
                        </el-button>
                        <el-button
                            circle
                            v-else
                            @click="updateState('1', scope.row.id)"
                        >
                            <span class="icon">&#xe613;</span>
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog
        v-model="editVisible"
        :title="dialogTitle"
        width="30%"
        align-center
    >
        <el-form
            :model="formData"
            :rules="rules"
            ref="formTestRef"
            label-width="150px"
        >
            <el-form-item label="名称">
                <el-input style="width: 30%" v-model="formData.name" />
            </el-form-item>
            <el-form-item label="协议类型">
                <el-select v-model="formData.type" value-key="table">
                    <el-option
                        v-for="item in protocolTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="说明">
                <el-input v-model="formData.remark" />
            </el-form-item>
            <el-form-item
                label="订阅地址"
                prop="url"
                v-if="formData.type == 1 || !formData.type"
            >
                <el-input v-model="formData.url">
                    <template #prepend>http</template>
                </el-input>
            </el-form-item>
            <div v-else>
                <el-form-item label="Mqtt服务端地址">
                    <el-input v-model="formData.mqtt_add" />
                </el-form-item>
                <el-form-item label="Mqtt服务器端口">
                    <el-input v-model="formData.mqtt_port" />
                </el-form-item>
                <el-form-item label="Mqtt主题">
                    <el-input v-model="formData.mqtt_topic" />
                </el-form-item>
            </div>

            <el-form-item class="footBtn">
                <el-button @click="editVisible = false">取消</el-button>
                <el-button type="primary" @click="saveData"> 确定 </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<style lang="scss" scoped>
// .iot-card-content .img > img {
//     max-width: inherit;
//     max-height: inherit;
// }
.card-content-bg2 {
    position: absolute;
    right: -5%;
    height: 100%;
    width: calc(44.65% + 34px);
    top: 0;
    background: linear-gradient(
        188.4deg,
        rgba(229, 0, 18, 0.03) 22.94%,
        rgba(229, 0, 18, 0) 94.62%
    );
    transform: skewX(-15deg);
}
.svgStyle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
        margin: auto;
        border: 1px solid #c5c6c8;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    span {
        cursor: pointer;
    }
}
.footBtn {
    position: relative;
    :deep() .el-form-item__content {
        position: absolute !important;
        right: 0 !important;
    }
}
.flex-1 {
    display: flex;
}
.iot-card-content {
    padding: 40px 12px 30px 40px !important;
}
.card-content-bg1 {
    position: absolute;
    right: -5%;
    height: 100%;
    width: 44.65%;
    top: 0;
    background: linear-gradient(
        188.4deg,
        rgba(102, 102, 102, 0.03) 30%,
        rgba(102, 102, 102, 0) 80%
    );
    transform: skew(-15deg);
}
:deep(.search) {
    margin: 0 !important;
    .el-input {
        margin-right: 10px !important;
    }
    .el-form-item {
        margin-bottom: 0;
    }
}
</style>
